<template>
  <Modal
    v-model="config"
    class="modal-tips"
    :mask-closable="false"
    width="800px"
    footer-hide
    draggable
    :sticky="true"
    title="修改申请内容"
    @on-cancel="cancel"
  >
    <div class="modal-main" style="position: relative">
      <Spin v-if="loading" :with-icon="true"></Spin>
      <div class="flx-row-s-c item-line long-name-nece">
        <div class="title-name">网站名称</div>
        <Input
          :v-model="siteName"
          :value="list.siteName"
          type="text"
          placeholder="请输入网站名称"
          maxlength="30"
          style="width: 200px"
          @keydown.native="keydown($event)"
        />
      </div>
      <div class="flx-row-s-c item-line long-name-nece">
        <div class="title-name">姓名</div>
        <Input
          :v-model="name"
          :value="list.username"
          type="text"
          placeholder="请输入姓名"
          maxlength="30"
          style="width: 200px"
          @keydown.native="keydown($event)"
        />
      </div>
      <div class="flx-row-s-c item-line">
        <div class="flx-row-s-c long-name-nece">
          <div class="title-name">会员ID(手机号)</div>
          <Input
            :v-model="memberID"
            :value="list.account"
            type="number"
            placeholder="请输入会员ID(手机号)"
            maxlength="11"
            style="width: 200px"
            @keydown.native="keydown($event)"
          />
        </div>

        <span class="c-black" style="margin-left: 12px"
          >会员等级:{{ list.userLevelName }}</span
        >
      </div>
      <div class="flx-row-s-c item-line long-name-nece">
        <div class="title-name">Email</div>
        <Input
          :v-model="email"
          :value="list.email"
          type="text"
          placeholder="请输入邮箱地址"
          maxlength="30"
          style="width: 200px"
          @keydown.native="keydown($event)"
        />
      </div>
      <div class="flx-row-s-c item-line">
        <div class="title-name">微信号</div>
        <Input
          :v-model="wechatNum"
          :value="list.wxNum"
          type="text"
          placeholder="请输入微信号"
          maxlength="30"
          style="width: 200px"
          @keydown.native="keydown($event)"
        />
      </div>
      <div class="flx-row-s-c item-line">
        <div class="title-name">公司名称</div>
        <Input
          :v-model="company"
          :value="list.company"
          type="text"
          placeholder="请输入公司名称"
          maxlength="30"
          style="width: 200px"
          @keydown.native="keydown($event)"
        />
      </div>
      <div class="flx-row-s-c item-line">
        <div class="title-name">国家/地区</div>
        <Select v-model="country" style="width: 150px; margin-right: 10px">
          <Option
            v-for="(item, index) in countryList"
            :key="'p' + index"
            :value="item.countryNameCn"
            >{{ item.countryNameCn }}</Option
          >
        </Select>
        <Select
          v-model="province"
          style="width: 150px; margin-right: 10px"
          @on-change="changeProvince"
        >
          <Option
            v-for="(item, index) in addressList"
            :key="'p' + index"
            :value="item.value"
            >{{ item.label }}</Option
          >
        </Select>
        <Select
          v-if="province != null && province != ''"
          v-model="city"
          style="width: 150px; margin-right: 10px"
        >
          <Option
            v-for="item in cityList"
            :key="item.value"
            :value="item.value"
            >{{ item.label }}</Option
          >
        </Select>
      </div>
      <div class="flx-row-s-c item-line">
        <div class="title-name">详细地址</div>
        <Input
          :v-model="address"
          :value="list.address"
          type="text"
          placeholder="请输入详细地址"
          style="width: 200px"
          @keydown.native="keydown($event)"
        />
      </div>
      <div class="flx-row-s-c item-line">
        <div class="title-name">免费二级域名</div>
        <Input
          :v-model="sid"
          :value="list.sld"
          type="text"
          placeholder="请输入"
          maxlength="30"
          style="width: 200px"
          @keydown.native="keydown($event)"
        />
        <span class="c-black" style="margin-left: 6px">.190.vip</span>
      </div>

      <div class="flx-row-c-c" style="margin-top: 30px">
        <div
          class="big-button-size user-strong-button"
          style="margin-right: 50px"
          @click="submit"
        >
          确认
        </div>
        <div class="big-button-size user-normal-button" @click="cancel">
          取消
        </div>
      </div>
    </div>
  </Modal>
</template>

<script>
import { getAddress, editApplyData } from "@/api/user";
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Object,
      default: () => {},
    },
    getlist: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      loading: false,
      // 表单数据
      name: "",
      siteName: "",
      memberID: "",
      memberlevel: "", // 会员等级
      wechatNum: "",
      email: "",
      company: "",
      countryList: [],
      addressList: [],
      cityList: [],
      address: "",
      sid: "", // 二级域名
      country: "中国", // 国家
      province: "", // 省
      city: "", // 市
      region: "", // 区
      isAgent: 0,
      agentAdminUrl: "",
    };
  },
  computed: {
    config: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
  created() {
    this.getAddressList();
    this.province = this.list.province;
  },
  mounted() {},
  methods: {
    // 获取省市区
    async getAddressList() {
      const { code, data } = await getAddress();
      if (code === 200 && data) {
        // 国家
        this.countryList = data.dictCountryList;
        // 地区
        this.addressList = data.dictVOList;
        if (this.province) {
          for (const i in this.addressList) {
            if (this.addressList[i].value === this.province) {
              if (
                this.addressList[i].value === "天津市" ||
                this.addressList[i].value === "北京市" ||
                this.addressList[i].value === "重庆市" ||
                this.addressList[i].value === "上海市"
              ) {
                this.cityList = this.addressList[i].children[0].children.concat(
                  this.addressList[i].children[1].children
                );
              } else {
                this.cityList = this.addressList[i].children;
              }
            }
          }
        }
      }
    },
    changeProvince() {
      for (const i in this.addressList) {
        if (this.addressList[i].value === this.province) {
          if (
            this.addressList[i].value === "天津市" ||
            this.addressList[i].value === "北京市" ||
            this.addressList[i].value === "重庆市" ||
            this.addressList[i].value === "上海市"
          ) {
            this.cityList = this.addressList[i].children[0].children.concat(
              this.addressList[i].children[1].children
            );
          } else {
            this.cityList = this.addressList[i].children;
          }
        }
      }
      this.city = "";
    },
    // 提交表单
    async submit() {
      this.loading = true;
      const data = {
        address: this.address,
        city: this.city,
        company: this.company,
        country: this.country,
        email: this.email,
        id: this.list.id,
        province: this.province,
        region: this.region,
        sld: this.sid,
        wxNum: this.wechatNum,
      };

      const res = await editApplyData(data);
      if (res.code === 200) {
        this.$Message.success("修改成功！");
        this.cancel();
        this.getlist();
      }
      this.loading = false;
    },
    // 密码输入过滤掉空格和回车
    keydown(event) {
      if (event.keyCode === 32 || event.keyCode === 13)
        event.returnValue = false;
    },
    cancel() {
      this.config = false;
      this.oldPassword = "";
      this.newPassword = "";
      this.confirmPassword = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.modal-main {
  padding: 30px 40px 50px;

  .item-line {
    margin-bottom: 10px;
  }
  .title-name {
    text-align: right;
    width: 120px;
    margin-right: 30px;
    font-size: 14px;
    line-height: 32px;
    color: #000;
    &::after {
      content: ":";
    }
  }
}
</style>
